<template>
  <div class="detail">
    <Header :title="$route.params.name">
      <template v-slot:left>
        <span @click="goto()">&lt;</span>
      </template>
      <template v-slot:right>
        <!-- 没有点击时 -->
        <span @click="flag=true,collect($route.params),$toast('已收藏')" v-if="flag==false">+</span>
        <!-- 点击一次时 -->
        <span @click="flag=false,cancal($route.params),$toast('取消收藏')" v-else>-</span>
      </template>
    </Header>
    <Detaillist></Detaillist>
    <div class="gwc">gwc</div>
    <!--  -->
  </div>
</template>

<script>
// import { Toast } from "mint-ui";
import Header from "../../components/Header";
import Detaillist from "./Detaillist";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      flag: false
    };
  },
  components: {
    Header,
    Detaillist
  },

  methods: {
    /* 收藏，取消收藏方法 */
    ...mapMutations(["collect", "cancal"]),
    /* 点击返回 */
    goto() {
      this.$router.push({
        name: "home"
      });
    }
  }
};
</script>

<style>
</style>